
<!doctype html>
<html lang="en">
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- head 中 -->
    <link rel="stylesheet" href="css/materialize.min.css">

   

    <title>H5 网页示例</title>

    <style>
        #title{
            color: #fb8c00;
        }

    </style>
</head>
<body style="margin-left: 10px;margin-right: 10px">








<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>日语语法测试</title>
    <style>

        .quiz-container {
            display: flex;
            flex-direction: column;
            align-items: center;
            margin-top: 50px;
        }

        .question-container {
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 20px;
            border: 2px solid black;
            max-width: 600px;
            margin-bottom: 30px;
        }

        .header {
            margin-bottom: 20px;
        }

        h1 {
            font-size: 36px;
            text-align: center;
        }

        p {
            font-size: 20px;
            margin-bottom: 30px;
        }

        .answer-options {
            display: flex;
            flex-direction: column;
        }

        .answer-options input[type=radio] {
            margin-right: 10px;
        }

        .submit-button-container {
            margin-top: 50px;
        }

        #submit-button {
            font-size: 20px;
            padding: 10px 20px;
            border: none;
            background-color: black;
            color: white;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        #submit-button:hover {
            background-color: white;
            color: black;
        }

        .result-container {
            margin-top: 50px;
            text-align: center;
        }

        span#result {
            font-weight: bold;
            font-size: 24px;
            padding: 0 10px;
        }



    </style>
</head>
<body>
<div class="quiz-container">
    <div class="question-container">
        <div class="header">
            <h1>问题一</h1>
        </div>
        <p>在以下的句子中，选出含有助词「も」的选项。</p>

        <div class="answer-options">
            <input type="radio" id="a" name="answer1" value="a">
            <label for="a">A.私はりんごが好きです。</label><br>
            <input type="radio" id="b" name="answer1" value="b">
            <label for="b">B.私もりんごが好きです。</label><br>
            <input type="radio" id="c" name="answer1" value="c">
            <label for="c">C.私はりんごも好きです。</label><br>
            <input type="radio" id="d" name="answer1" value="d">
            <label for="d">D.私はりんごを食べます。</label><br>
        </div>
    </div>

    <div class="question-container">
        <div class="header">
            <h1>问题二</h1>
        </div>
        <p>在以下的句子中，哪一个是正确的寻问句？</p>
        <div class="answer-options">
            <input type="radio" id="e" name="answer2" value="e">
            <label for="e">A.ドアは開けませんか。</label><br>
            <input type="radio" id="f" name="answer2" value="f">
            <label for="f">B.ドアは開けますか。</label><br>
            <input type="radio" id="g" name="answer2" value="g">
            <label for="g">C.ドアは開ける。</label><br>
            <input type="radio" id="h" name="answer2" value="h">
            <label for="h">D.ドア開けた。</label><br>
        </div>
    </div>

    <div class="submit-button-container">
        <button id="submit-button">提交</button>
    </div>

    <div class="result-container">
        <p>你做对了<span id="result">0</span>道题！</p>
    </div>
</div>

<script>
    // 获取页面元素
    const submitButton = document.getElementById("submit-button");
    const answerOptions1 = document.getElementsByName("answer1");
    const answerOptions2 = document.getElementsByName("answer2");
    const result = document.getElementById("result");

    let correctAnswers = 0; // 初始化做对题数为0

    // 点击提交按钮后的操作
    submitButton.addEventListener("click", () => {
        // 判断第一题的答案是否正确
        let answer1 = "a";
        for (let i = 0; i < answerOptions1.length; i++) {
            if (answerOptions1[i].checked) {
                answer1 = answerOptions1[i].value;
                break;
            }
        }
        if (answer1 === "b") {
            correctAnswers++;
        }

        // 判断第二题的答案是否正确
        let answer2 = "";
        for (let i = 0; i < answerOptions2.length; i++) {
            if (answerOptions2[i].checked) {
                answer2 = answerOptions2[i].value;
                break;
            }
        }
        if (answer2 === "f") {
            correctAnswers++;
        }

        // 在结果框中显示做对的题数
        result.textContent = correctAnswers;

        // 重置正确答案数量
        correctAnswers = 0;

        // 重置表单
        document.querySelector("form").reset();
    });

</script>
</body>
</html>








